<template>
  <dv-border-box-10
    :style="{ '--right': right + 'px' }"
    backgroundColor="#00003bc1"
    :color="['#4789e3', '#65bfe5']"
    class="right-row-bg"
  >
    <div class="right-row-box">
      <!-- <dv-border-box-12 class="border-box">dv-border-box-13</dv-border-box-12> -->
      <!-- <div class="tolbar">
                <h4 style="text-align: center; margin: 0; font-size: 20px;">实时数据</h4>
            </div> -->
      <div class="content">
        <div class="tools">
          <dv-decoration-7 :dur="2" class="title"
            >&nbsp;详细信息&nbsp;</dv-decoration-7
          >
          <div class="tool">
            <i class="el-icon-close" @click="removeFn"></i>
          </div>
        </div>
        <div class="box-content">
          <el-descriptions
            class="margin-left"
            :column="2"
            :contentStyle="{ 'font-weight': 'bold' }"
            v-if="point"
          >
            <el-descriptions-item label="经度">{{
              point.lon
            }}</el-descriptions-item>
            <el-descriptions-item label="纬度">{{
              point.lat
            }}</el-descriptions-item>
            <el-descriptions-item label="深度">{{
              point.depth
            }}</el-descriptions-item>
            <el-descriptions-item label="震级">{{
              point.scale
            }}</el-descriptions-item>
            <el-descriptions-item label="发点" :span="2">{{
              point.location
            }}</el-descriptions-item>
            <el-descriptions-item label="损害">--</el-descriptions-item>
          </el-descriptions>
        </div>
        <dv-decoration-7 class="title">&nbsp;缓冲区分析&nbsp;</dv-decoration-7>

        <div class="box-content">
          <div
            class="radar"
            id="radar"
            style="width: 100%; height: 250px"
          ></div>
        </div>
        <dv-decoration-7 class="title">&nbsp;网络信息&nbsp;</dv-decoration-7>
        <div class="box-content web-network" v-if="netWorkList">
          <div
            class="item"
            v-for="(i, index) in netWorkList.slice(0, 10)"
            v-if="i.title"
            :key="i.id"
          >
            <p class="idx">{{ index + 1 }}</p>
            <div class="left">
              <p class="location" :title="i.title">{{ i.title }}</p>
              <p style="font-size: 14px">
                {{ i.abs }}
              </p>
            </div>
            <div class="right">
              <i
                class="el-icon-s-promotion"
                title="转到内容页"
                @click="toWebContent(i.url)"
              ></i>
            </div>
          </div>
        </div>
        <template v-else>
          <p class="warnig">暂无获取到网络信息</p>
        </template>
      </div>
    </div>
  </dv-border-box-10>
</template>

<script>
// https://www.baidu.com/s?wd=aaa&pn=1&rn=10&tn=json
import { getById, getByBuffer } from "@/api";
export default {
  name: "Test1LeftRow",
  filters: {},
  data() {
    return {
      myChart: null,
      option: null,
      eData: [],
      right: 0,
      flag: "M0",
      selectedId: null,
      point: null,
      results: {
        50: { title: "", points: null, point: null },
        100: { title: "", points: null, point: null },
      },
      netWorkList: [],
    };
  },

  mounted() {},
  computed: {
    getMenuFlag() {
      return this.$store.state.activeMenu;
    },
    getSelectedId() {
      return this.$store.state.selectedId;
    },
    getPoint() {
      return this.$store.state.point;
    },
  },
  watch: {
    getMenuFlag: {
      handler(newValue, oldValue) {
        this.right = -500;
        if (newValue === this.flag) {
          this.right = 0;
        }
      },
      deep: true,
      immediate: true,
    },
    getSelectedId: {
      handler(newValue, oldValue) {
        if (!newValue) return;
        this.selectedId = newValue;
        this.getByID();
      },
      deep: true,
      immediate: true,
    },
    getPoint: {
      handler(newVal, oldVal) {
        if (Object.keys(newVal).length == 0) return;
        if (oldVal) {
          if (newVal.id == oldVal.id) return;
        }
        this.point = newVal;
      },
      deep: true,
      immediate: true,
    },
    point: {
      handler(newVal, oldVal) {
        if (Object.keys(newVal).length == 0) return;

        this.eData = [];
        this.getWebWork(newVal);
        this.getDataList(newVal, 50);
        this.getDataList(newVal, 100);
      },
      deep: true,
    },
  },
  mounted() {
    setTimeout(() => {
      this.init();
    }, 1500);
  },
  methods: {
    init() {
      var chartDom = document.getElementById("radar");
      this.myChart = this.$echarts.init(chartDom);

      var _this = this;

      var LOADMAP_ICON =
        "M98.133333 346.154667C96 226.389333 194.432 128 312.064 128c119.765333 0 211.754667 100.522667 209.621333 218.154667 0 89.813333-57.770667 194.602667-106.965333 265.173333-38.485333 55.637333-79.104 100.522667-96.213333 121.898667-2.133333 0-4.266667 4.266667-8.533334 4.266666-2.176 0-6.442667 0-8.576-4.266666a1274.112 1274.112 0 0 1-96.256-121.898667c-49.194667-70.570667-106.922667-173.226667-106.922666-265.173333z m121.941334-4.266667a91.306667 91.306667 0 0 0 91.946666 91.946667A91.306667 91.306667 0 0 0 404.053333 341.888a91.306667 91.306667 0 0 0-91.989333-91.989333c-51.328 0-91.946667 42.794667-91.946667 91.989333z m415.445333 319.701333l-121.898667-96.213333c-2.133333-2.133333-2.133333-6.4 0-4.266667l121.898667-96.256c2.133333-2.133333 4.266667-2.133333 6.4-2.133333v51.328h156.16c6.4 0 12.8 6.4 12.8 12.8v70.570667c0 6.4-6.4 12.842667-12.8 12.842666h-156.16v53.461334c-2.133333 0-4.266667 0-6.4-2.133334z m-466.773333-11.733333c-2.133333-8.533333-6.4-12.842667-10.666667-19.285333l-42.794667 145.450666 143.274667-12.8c-32.085333-38.528-59.861333-74.88-89.813333-113.365333z m260.906666 98.346667l126.208 166.826666h357.12c8.576 0 14.976-2.133333 19.285334-8.533333 6.4-4.266667 6.4-12.842667 6.4-19.242667l-49.194667-168.96-459.818667 29.909334zM108.842667 808.106667l-21.333334 74.837333c0 2.133333-2.176 4.266667-2.176 8.533333 0 12.885333 10.666667 23.552 23.509334 23.552h412.8l-130.474667-158.293333L108.8 808.106667z";
      var DOWNLOADIMG_ICON =
        "M288 352a224 224 0 1 1 448 0v0.704A176 176 0 0 1 720 704H672v-64h48a112 112 0 1 0 0-224H672v-64a160 160 0 0 0-320 0v64H304a112 112 0 1 0 0 224H352v64H304A176 176 0 0 1 288 352.704V352z m256 128v293.504l64-64 45.248 45.248L512 896l-141.248-141.248L416 709.504l64 64V480h64z";
      var LOADTODATASET_ICON =
        "M235.29244445 62.06577779H75.09333333c-7.28177778 0-14.56355555 7.28177778-14.56355555 21.84533333v393.216c0 7.28177778 7.28177778 14.56355555 14.56355555 14.56355556h291.27111112c7.28177778 0 14.56355555-7.28177778 14.56355555-14.56355556V207.70133334H271.70133333c-21.84533333 0-36.40888889-14.56355555-36.40888888-36.40888888V62.06577779z m36.40888888 7.28177777v101.9448889h101.94488889L271.70133333 69.34755556zM75.09333333 25.6568889h196.608c7.28177778 0 7.28177778 0 14.56355556 7.28177778L410.05511111 156.7288889s7.28177778 7.28177778 7.28177778 14.56355556v305.83466666c0 29.12711111-21.84533333 50.97244445-50.97244444 50.97244444H75.09333333c-29.12711111 0-50.97244445-21.84533333-50.97244444-50.97244444V83.91111112c0-36.40888889 21.84533333-58.25422222 50.97244444-58.25422222z m36.40888889 196.608h87.38133333c14.56355555 0 21.84533333 7.28177778 21.84533334 21.84533333s-7.28177778 14.56355555-21.84533334 14.56355556H111.50222222c-7.28177778 0-14.56355555-7.28177778-14.56355555-14.56355556s7.28177778-21.84533333 14.56355555-21.84533333z m0 72.81777778h218.45333333c7.28177778 0 14.56355555 7.28177778 14.56355556 14.56355555s-7.28177778 21.84533333-14.56355556 21.84533333h-218.45333333c-7.28177778 0-14.56355555-7.28177778-14.56355555-14.56355555s7.28177778-21.84533333 14.56355555-21.84533333z m0 72.81777778h218.45333333c7.28177778 0 14.56355555 7.28177778 14.56355556 14.56355555s-7.28177778 21.84533333-14.56355556 21.84533333h-218.45333333c-7.28177778 0-14.56355555-7.28177778-14.56355555-14.56355555s7.28177778-21.84533333 14.56355555-21.84533333zM745.01688889 448.00000001c-101.94488889 0-211.17155555 36.40888889-211.17155556 109.22666667V884.90666668c0 80.09955555 109.22666667 109.22666667 211.17155556 109.22666666s211.17155555-36.40888889 211.17155556-109.22666666V557.22666668C948.90666667 484.4088889 839.68 448.00000001 745.01688889 448.00000001z m174.76266666 436.90666667c0 43.69066667-80.09955555 80.09955555-182.04444444 80.09955555s-182.04444445-36.40888889-182.04444444-80.09955555v-65.536c29.12711111 36.40888889 101.94488889 58.25422222 182.04444444 58.25422222s145.63555555-21.84533333 182.04444444-58.25422222v65.536z m0-101.94488889c0 43.69066667-80.09955555 80.09955555-182.04444444 80.09955555s-182.04444445-36.40888889-182.04444444-80.09955555v-65.536c29.12711111 36.40888889 101.94488889 58.25422222 182.04444444 58.25422222s145.63555555-21.84533333 182.04444444-58.25422222v65.536z m0-101.94488889c0 43.69066667-80.09955555 80.09955555-182.04444444 80.09955556s-182.04444445-36.40888889-182.04444444-80.09955556v-58.25422222c36.40888889 36.40888889 109.22666667 50.97244445 182.04444444 50.97244444s138.35377778-14.56355555 182.04444444-50.97244444v58.25422222z m-174.76266666-43.69066667c-101.94488889 0-182.04444445-36.40888889-182.04444444-80.09955555 0-43.69066667 80.09955555-80.09955555 182.04444444-80.09955556s182.04444445 36.40888889 182.04444444 80.09955556c-7.28177778 43.69066667-87.38133333 80.09955555-182.04444444 80.09955555zM861.52533333 892.18844446c0 7.28177778 7.28177778 14.56355555 14.56355556 14.56355555s14.56355555-7.28177778 14.56355556-14.56355555-7.28177778-14.56355555-14.56355556-14.56355556-14.56355555 7.28177778-14.56355556 14.56355556zM861.52533333 790.24355556c0 7.28177778 7.28177778 14.56355555 14.56355556 14.56355556s14.56355555-7.28177778 14.56355556-14.56355556-7.28177778-14.56355555-14.56355556-14.56355555-14.56355555 7.28177778-14.56355556 14.56355555zM861.52533333 688.29866668c0 7.28177778 7.28177778 14.56355555 14.56355556 14.56355555s14.56355555-7.28177778 14.56355556-14.56355555-7.28177778-14.56355555-14.56355556-14.56355556-14.56355555 7.28177778-14.56355556 14.56355556zM810.55288889 324.20977779h-36.40888889c0-65.536-14.56355555-116.50844445-50.97244445-138.35377778-72.81777778-43.69066667-196.608 14.56355555-196.608 14.56355555L512 171.29244446c7.28177778 0 145.63555555-72.81777778 233.01688889-14.56355556 43.69066667 36.40888889 65.536 87.38133333 65.536 167.48088889zM715.88977778 302.36444446h152.91733333l-72.81777778 72.81777777z";

      this.option = {
        title: {
          // text: "距离统计",
          textStyle: {
            textAlign: "center",
            color: "#1dc1f5",
          },
        },
        toolbox: {
          feature: {
            saveAsImage: {
              icon: DOWNLOADIMG_ICON,
            },
            myTool1: {
              show: true, //是否显示
              title: "加载到数据集", //鼠标悬空的提示文字
              icon: LOADTODATASET_ICON,
              onclick: (o) => {
                _this.addToDataSet(_this.results[50]);
                _this.addToDataSet(_this.results[100]);
                _this.$message.success("已添加到数据集");
              },
            },
          },
          itemSize: 18, //图标大小
          iconStyle: {
            color: "#1dc1f5",
            borderColor: "#1dc1f5",
            borderWidth: 0.5,
          },
        },
        legend: {
          data: ["50", "100"],
          formatter: function (name) {
            return name + " km";
          },
          top: "bottom",
          left: "0",
          orient: "vertical",
          textStyle: {
            color: "#1dc1f5",
          },
        },
        tooltip: {
          confine: true,
          trigger: "item",
          axisPointer: {
            type: "cross",
            axis: "y",
            snap: true,
          },
          enterable: true, //鼠标是否可以移动到tooltip区域内
        },
        radar: {
          // shape: 'circle',
          splitNumber: 3,
          radius: "60%",
          indicator: [
            { name: "≤3" },
            { name: "≤4.5" },
            { name: "≤6 " },
            { name: "≤7" },
            { name: "≤8" },
            { name: "≥8" },
          ],
        },
        series: [
          {
            type: "radar",
            data: _this.eData,
          },
        ],
        grid: {
          left: 60,
        },
      };

      this.option && this.myChart.setOption(this.option);
    },
    async getDataList(point, r) {
      const { data: res } = await getByBuffer(point.lon, point.lat, r * 1000);
      if (!res) return;
      this.results[r] = {
        point,
        points: res,
        title: "点" + point.id + "的半径为" + r + "km的缓冲区查询",
      };
      this.setLevel(res, r + "");
    },
    setLevel(points, name) {
      if (!points) return;
      if (!name) return;

      let ob = { value: [0, 0, 0, 0, 0, 0], name };

      points.forEach((l) => {
        if (l.scale < 3) {
          ob.value[0] += 1;
        } else if (l.scale >= 3 && l.scale < 4.5) {
          ob.value[1] += 1;
        } else if (l.scale >= 4.5 && l.scale < 6) {
          ob.value[2] += 1;
        } else if (l.scale >= 6 && l.scale < 7) {
          ob.value[3] += 1;
        } else if (l.scale >= 7 && l.scale < 8) {
          ob.value[4] += 1;
        } else {
          ob.value[5] += 1;
        }
      });

      this.eData.push(ob);
      // 如果eData的长度为2
      if (this.eData.length == 2) {
        // 设置定时器，每隔300毫秒执行一次
        let s = setInterval(() => {
          // 如果option存在
          if (this.option) {
            // 清除定时器
            clearInterval(s);
            // 将eData赋值给option的series的data
            this.option.series[0].data = this.eData;
            // 设置图表的option
            this.myChart.setOption(this.option);
          }
        }, 300);
      }
    },
    removeFn() {
      console.log("removeFn");
      this.right = -500;
    },
    async getByID() {
      if (!this.selectedId) return;
      const { data: res } = await getById(this.selectedId);
      this.point = res;
    },
    async getWebWork(point) {
      if (!point) return;
      let s = point.location + point.scale + "级地震";
      const { data: res } = await this.$axios.get(
        "/api2/s?wd=" + s + "&pn=1&rn=10&tn=json"
      );
      if (!res) return;
      this.netWorkList = res.feed.entry;
    },
    toWebContent(url) {
      if (!url) return;
      window.open(url);
    },
    addToDataSet(data) {
      if (data.constructor != Object)
        return console.log("参数错误", typeof data);
      let l = {
        id: new Date().getTime() + Math.floor(Math.random() * 10),
        title: data.title,
        length: data.points.length,
        load: false,
        points: data.points,
      };

      let selections = this.$store.state.selections;
      selections.push(l);
      this.$store.commit("setSelections", selections);
    },
  },
};
</script>

<style lang="less" scoped>
.right-row-bg {
  position: absolute;
  top: 0;
  right: var(--right);
  bottom: 0;
  width: 20%;
  margin: 5px;
  z-index: 9;
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  animation: run 1s linear;
  color: #1dc1f5;
}

@keyframes run {
  0% {
    left: -100%;
  }

  100% {
    left: 0;
  }
}

.right-row-box {
  position: absolute;

  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  // color: #4789e3;
  // color: #3f96a5;

  .border-box {
    width: 95%;
    height: 150px;
  }

  // .tolbar {
  //     width: 100%;
  //     height: 5%;
  // }

  .content {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
  }
  .web-network {
    overflow-y: auto;
  }
  .box-content {
    .title {
      text-align: left;
      margin: 10px;
      padding-left: 5px;
      border-left: 5px #139fc0 solid;
      font-size: 18px;
      font-family: "Courier New", Courier, monospace;
    }
    .item {
      display: flex;
      flex-direction: row;
      height: 50px;
      justify-content: space-between;
      padding: 5px 10px;
      background-color: #2f338a;
      padding: 10px 15px;
      border-radius: 4px;
      margin: 5px 5px;
      .left {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;

        p {
          margin: 0;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          width: 100%;
          display: inline-block;
        }
        .location {
          font-weight: bold;
          font-size: 16px;
          text-align: left;
        }
      }
      .right {
        width: 20%;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        justify-content: space-evenly;

        i {
          font-size: 24px;
          transition: all 0.1s linear;
          cursor: pointer;
          &:hover {
            scale: 1.01;
          }
        }
      }

      .idx {
        text-align: center;
        margin-right: 15px;
        font-weight: bold;
      }
    }
    .card {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;

      .card-item {
        width: 100%;
        padding: 10px 15px;
        border-radius: 8px;
        background-color: #2f338a;
        transition: 0.3s linear;

        p {
          font-size: 16px;
          font-weight: bold;
          text-align: start;
        }
      }
      .results {
        width: 100%;
        padding: 10px 10px;

        p {
          margin-top: 0px;
        }
      }
    }
  }

  // .box-content:nth-child(1n) {
  //   flex: 2;
  // }

  // .box-content:nth-child(2n) {
  //   flex: 1;
  // }
}

.tools {
  // display: flex;
  // flex-direction: row;
  // flex-wrap: nowrap;
  // justify-content: space-around;
  // align-items: center;
  position: relative;
  width: 100%;
  margin-bottom: 5px;

  .tool {
    position: absolute;
    right: 10px;
    top: 5px;
    background: #4687e240;
  }
}
.title {
  width: 100%;
  height: 30px;
}
.el-descriptions {
  background-color: transparent !important;
  color: #1dc1f5 !important;
  font-size: 18px;
}

.margin-left {
  margin-left: 10px;
}
</style>
